<template>
  <div v-loading="loading" class="set_container" element-loading-text="加载中...">
    <el-descriptions border direction="vertical" :column="1" class="set-table">
      <el-descriptions-item label="全局查询">
        <div class="item flex-justify-between">
          <span>开启后，所有人可以查询所有订单，非自己处理订单也可以</span>
          <div style="display: flex; gap: 7px; align-items: center">
            <el-switch v-model="form.selectAllOrder" @change="saveSet('all')" />
            <span v-if="form.selectAllOrder">开启</span>
            <span v-else>关闭</span>
          </div>
        </div>
      </el-descriptions-item>
    </el-descriptions>
    <el-descriptions border direction="vertical" :column="1" class="set-table">
      <el-descriptions-item label="结单修改">
        <div class="item flex-justify-between">
          <span
            >开启后，工单申请结单后，支持添加物料、费用和修改结单回执信息；审核结单后不支持修改；</span
          >
          <div style="display: flex; gap: 7px; align-items: center">
            <el-switch v-model="form.finishUpdate" @change="saveSet('finish')" />
            <span v-if="form.finishUpdate">开启</span>
            <span v-else>关闭</span>
          </div>
        </div>
        <el-divider style="margin: 10px 0" />
        <div class="item flex-justify-between">
          <span>是否允许部门人员修改</span>
          <div style="display: flex; gap: 7px; align-items: center">
            <el-switch
              v-model="form.openRepairAuth"
              :disabled="!form.finishUpdate"
              @change="saveSet('repair')"
            />
            <span v-if="form.openRepairAuth" :style="{ color: form.finishUpdate ? '#000' : '#999' }"
              >开启</span
            >
            <span v-else :style="{ color: form.finishUpdate ? '#000' : '#999' }">关闭</span>
          </div>
        </div>
      </el-descriptions-item>
    </el-descriptions>
    <el-descriptions border direction="vertical" :column="1" class="set-table">
      <el-descriptions-item label="报单设置">
        <div class="item flex-justify-between">
          <h4>重复报单</h4>
          <div style="display: flex; gap: 7px; align-items: center">
            <el-switch v-model="form.enableRepeatOrder" @change="saveSet('repeat')" />
            <span v-if="form.enableRepeatOrder">开启</span>
            <span v-else>关闭</span>
          </div>
        </div>
        <p class="tips">开启后，允许重复报单；关闭后，不允许重复报单</p>
        <div>
          <el-checkbox
            v-model="form.repeatByUser"
            :disabled="!form.enableRepeatOrder"
            @change="saveSet('repeatByUser')"
            >公司报单</el-checkbox
          >
          <el-checkbox
            v-model="form.repeatByNetwork"
            :disabled="!form.enableRepeatOrder"
            @change="saveSet('repeatByNetwork')"
            >部门报单</el-checkbox
          >
          <el-checkbox
            v-model="form.repeatByService"
            :disabled="!form.enableRepeatOrder"
            @change="saveSet('repService')"
            >总部报单</el-checkbox
          >
        </div>
        <!-- <el-divider style="margin: 10px 0" /> -->
        <div class="item flex-justify-between">
          <h4>重复报单提醒</h4>
          <div style="display: flex; gap: 7px; align-items: center">
            <el-switch v-model="form.enableRepeatOrderTip" @change="saveSet('repTip')" />
            <span v-if="form.enableRepeatOrderTip">开启</span>
            <span v-else>关闭</span>
          </div>
        </div>
        <p class="tips">开启后，重复报单时，将会弹窗提醒</p>
        <div>
          <el-checkbox
            v-model="form.repeatByUserTip"
            :disabled="!form.enableRepeatOrderTip"
            @change="saveSet('repeatByUserTip')"
            >公司提醒</el-checkbox
          >
          <el-checkbox
            v-model="form.repeatByNetworkTip"
            :disabled="!form.enableRepeatOrderTip"
            @change="saveSet('repeatByNetworkTip')"
            >部门提醒</el-checkbox
          >
          <el-checkbox
            v-model="form.repeatByServiceTip"
            :disabled="!form.enableRepeatOrderTip"
            @change="saveSet('repServiceTip')"
            >总部提醒</el-checkbox
          >
        </div>
        <el-divider style="margin: 10px 0" />
        <div class="item flex-justify-between">
          <h4>工单类型判断</h4>
          <div style="display: flex; gap: 7px; align-items: center">
            <el-switch v-model="form.enableOrderModule" @change="saveSet('enableOrderModule')" />
            <span v-if="form.enableOrderModule">开启</span>
            <span v-else>关闭</span>
          </div>
        </div>
        <p class="tips">开启则按当前报单模块査重；不开启则判断所有模块是否有符合以下条件的单</p>
        <el-divider style="margin: 10px 0" />
        <div class="item flex-justify-between">
          <h4>重复报单条件判断</h4>
        </div>
        <p class="tips">至少选择俩个条件，当报单内容全部符合勾选的条件时，则会提示重复报单！</p>
        <div class="flex-aligh-center" style="display: flex; align-items: center">
          <el-checkbox v-model="form.enableProName" @change="saveSet('proName')"
            >设备名称</el-checkbox
          >
          <el-checkbox
            ref="buttonRef"
            v-model="form.enableProCode"
            v-click-outside="onClickOutside"
            @change="saveSet('proCode')"
            ><span style="display: flex; align-items: center; column-gap: 4px"
              ><span>设备序列号</span
              ><el-icon size="16" color="#e69103">
                <WarningFilled />
              </el-icon>
            </span>
          </el-checkbox>
          <el-popover
            :offset="0"
            :width="270"
            :virtual-ref="buttonRef"
            trigger="hover"
            placement="top"
            virtual-triggering
          >
            <div style="display: flex; align-items: center; justify-content: space-between">
              <div style="display: flex; align-items: center; column-gap: 10px">
                <el-icon size="30" color="#e69103">
                  <WarningFilled />
                </el-icon>
                <div>
                  <div style="font-size: 14px; font-weight: bold">报单条件</div>
                  <span style="font-size: 12px">报单时，设备序列号允许为空！</span>
                </div>
              </div>
              <!-- <el-icon v-click-outside="onClickOutside" color="#999" size="20"><Close /></el-icon> -->
            </div>
          </el-popover>
          <el-checkbox v-model="form.enableProModel" @change="saveSet('proModel')"
            >设备型号</el-checkbox
          >
          <!-- <el-checkbox v-model="form.enableUserAccount" @change="saveSet('userAccount')"
            >公司账号</el-checkbox
          > -->
          <el-checkbox v-model="form.enableUserPhone" @change="saveSet('userPhone')"
            >公司手机号</el-checkbox
          >
          <el-checkbox v-model="form.enableUserName" @change="saveSet('userName')"
            >公司姓名</el-checkbox
          >
          <!-- <el-checkbox v-model="form.enableUserAddress" @change="saveSet('userAddress')">公司地址</el-checkbox> -->
        </div>
        <el-divider style="margin: 10px 0" />
        <p class="tips">并满足以下任一条件(不选则默认全部状态的工单条件判重)</p>
        <div class="flex-aligh-center">
          <el-checkbox-group
            v-model="form.orderstatusArr"
            @change="saveSet('orderstatusArr', $event)"
          >
            <el-checkbox value="1">待派单</el-checkbox>
            <el-checkbox value="2">待部门确认</el-checkbox>
            <el-checkbox value="3">处理中</el-checkbox>
            <el-checkbox value="4">已完成 </el-checkbox>
            <el-checkbox value="5">已取消</el-checkbox>
          </el-checkbox-group>
        </div>
        <el-divider style="margin: 10px 0" />
        <div class="item flex-justify-between">
          <h4>报单携带登记信息</h4>
          <div style="display: flex; gap: 7px; align-items: center">
            <el-switch v-model="form.carryRegistInfo" @change="saveSet('reg')" />
            <span v-if="form.carryRegistInfo">开启</span>
            <span v-else>关闭</span>
          </div>
        </div>
        <p class="tips">开启后，报单选择设备时，自动带出关联的登记信息</p>
        <el-divider style="margin: 10px 0" />
        <div class="item flex-justify-between">
          <h4>申请关联物料</h4>
          <div style="display: flex; gap: 7px; align-items: center">
            <el-switch v-model="form.showRelationSpare" @change="saveSet('spare')" />
            <span v-if="form.showRelationSpare">开启</span>
            <span v-else>关闭</span>
          </div>
        </div>
        <p class="tips">开启后，工单申请物料，只显示该设备关联的物料信息</p>
      </el-descriptions-item>
    </el-descriptions>
  </div>
</template>

<script setup lang="ts">
  import { ref, onMounted, unref } from 'vue'
  import { ElMessage, ElMessageBox } from 'element-plus'
  import { getWorkSet, saveWorkSet } from '@/api/basic'
  import _ from 'lodash'
  import { ClickOutside as vClickOutside } from 'element-plus'
  const loading = ref(true)
  const props = defineProps({
    active_name: String,
  })

  const form = ref({
    carryRegistInfo: true,
    enableProCode: false,
    enableProModel: false,
    repeatByNetwork: false,
    enableProName: false,
    enableRepeatOrder: true,
    enableRepeatOrderTip: true,
    repeatByNetworkTip: true,
    enableUserAccount: false,
    enableUserAddress: false,
    enableUserName: true,
    enableUserPhone: true,
    finishUpdate: false,
    id: null,
    openRepairAuth: false,
    repeatByService: false,
    repeatByServiceTip: true,
    selectAllOrder: true,
    showRelationSpare: true,
    orderstatusArr: [],
    enableOrderModule: false,
    repeatByUser: false,
    repeatByUserTip: true,
    orderStatus: '',
  })

  const checkList = ref([])

  onMounted(() => {
    if (props.active_name == 'set') {
      getSet()
    }
  })
  const buttonRef = ref()
  const popoverRef = ref()
  const onClickOutside = () => {
    unref(popoverRef)?.popperRef?.delayHide?.()
  }
  // 获取工单设置
  const getSet = async () => {
    loading.value = true
    await getWorkSet().then((res) => {
      form.value = res.data.data.row
      form.value.carryRegistInfo = res.data.data.row.carryRegistInfo || false
      form.value.enableProCode = res.data.data.row.enableProCode || false
      form.value.enableProModel = res.data.data.row.enableProModel || false
      form.value.enableProName = res.data.data.row.enableProName || false
      form.value.enableRepeatOrder = res.data.data.row.enableRepeatOrder || false
      form.value.enableRepeatOrderTip = res.data.data.row.enableRepeatOrderTip || false
      form.value.enableUserAccount = res.data.data.row.enableUserAccount || false
      form.value.enableUserAddress = res.data.data.row.enableUserAddress || false
      form.value.enableUserName = res.data.data.row.enableUserName || false
      form.value.enableUserPhone = res.data.data.row.enableUserPhone || false
      form.value.finishUpdate = res.data.data.row.finishUpdate || false
      form.value.id = res.data.data.row.id
      form.value.openRepairAuth = res.data.data.row.openRepairAuth || false
      form.value.repeatByUser = res.data.data.row.repeatByUser || false
      form.value.repeatByUserTip = res.data.data.row.repeatByUserTip || false
      form.value.repeatByService = res.data.data.row.repeatByService || false
      form.value.repeatByServiceTip = res.data.data.row.repeatByServiceTip || false
      form.value.selectAllOrder = res.data.data.row.selectAllOrder || false
      form.value.showRelationSpare = res.data.data.row.showRelationSpare || false
      form.value.orderstatusArr = [
        ...new Set(res.data.data.row.orderStatus?.split(',').filter((o) => o)),
      ]
    })
    loading.value = false
  }

  // 重复报单判断判断方法
  const repeatMethod = () => {
    checkList.value = []
    checkList.value.push(form.value.enableProName)
    checkList.value.push(form.value.enableProCode)
    checkList.value.push(form.value.enableProModel)
    checkList.value.push(form.value.enableUserAccount)
    checkList.value.push(form.value.enableUserName)
    checkList.value.push(form.value.enableUserPhone)
    checkList.value.push(form.value.enableUserAddress)
    let tmp = []
    checkList.value.forEach((item) => {
      if (item) {
        tmp.push(item)
      }
    })
    return tmp
  }

  // 还原旧值
  const returnValue = (type) => {
    switch (type) {
      case 'proName':
        form.value.enableProName = !form.value.enableProName
        break
      case 'proCode':
        form.value.enableProCode = !form.value.enableProCode
        break
      case 'proModel':
        form.value.enableProModel = !form.value.enableProModel
        break
      case 'userAccount':
        form.value.enableUserAccount = !form.value.enableUserAccount
        break
      case 'userName':
        form.value.enableUserName = !form.value.enableUserName
        break
      case 'userPhone':
        form.value.enableUserPhone = !form.value.enableUserPhone
        break
      case 'userAddress':
        form.value.enableUserAddress = !form.value.enableUserAddress
        break
    }
  }

  // 保存工单设置
  const saveSet = async (type, val = null) => {
    ElMessageBox({
      type: 'warning',
      title: '提示',
      message: '确认修改此设置?',
      showCancelButton: true,
      closeOnClickModal: false,
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      autofocus: false,
      beforeClose: (action, instance, done) => {
        if (action === 'confirm') {
          instance.confirmButtonLoading = true
          instance.confirmButtonText = '加载中...'
          setTimeout(() => {
            done()
            setTimeout(() => {
              instance.confirmButtonLoading = false
            }, 0)
          }, 800)
        } else {
          done()
        }
      },
    })
      .then(() => {
        if (repeatMethod().length < 2) {
          ElMessage({
            message: '请至少选择两个字段进行重复报单判断',
            type: 'warning',
            duration: 5000,
            plain: true,
            showClose: true,
          })
          returnValue(type)
          return
        }
        let dataVo = _.cloneDeep(form.value)
        dataVo['orderStatus'] = form.value.orderstatusArr.join() || ''
        saveWorkSet(dataVo).then((res) => {
          if (res.data.success == true) {
            ElMessage({
              message: res.data.message,
              type: 'success',
              duration: 5000,
              plain: true,
              showClose: true,
            })
            getSet()
          } else {
            ElMessage({
              message: res.data.message,
              type: 'warning',
              duration: 5000,
              plain: true,
              showClose: true,
            })
            return
          }
        })
      })
      .catch(() => {
        switch (type) {
          case 'all':
            form.value.selectAllOrder = !form.value.selectAllOrder
            break
          case 'finish':
            form.value.finishUpdate = !form.value.finishUpdate
            break
          case 'repair':
            form.value.openRepairAuth = !form.value.openRepairAuth
            break
          case 'repeat':
            form.value.enableRepeatOrder = !form.value.enableRepeatOrder
            break
          case 'repeatByUser':
            form.value.repeatByUser = !form.value.repeatByUser
            break
          case 'repeatByNetwork':
            form.value.repeatByNetwork = !form.value.repeatByNetwork
            break
          case 'repeatByNetworkTip':
            form.value.repeatByNetworkTip = !form.value.repeatByNetworkTip
            break
          case 'repService':
            form.value.repeatByService = !form.value.repeatByService
            break
          case 'repTip':
            form.value.enableRepeatOrderTip = !form.value.enableRepeatOrderTip
            break
          case 'repeatByUserTip':
            form.value.repeatByUserTip = !form.value.repeatByUserTip
            break
          case 'repServiceTip':
            form.value.repeatByServiceTip = !form.value.repeatByServiceTip
            break
          case 'proName':
            form.value.enableProName = !form.value.enableProName
            break
          case 'proCode':
            form.value.enableProCode = !form.value.enableProCode
            break
          case 'proModel':
            form.value.enableProModel = !form.value.enableProModel
            break
          case 'userAccount':
            form.value.enableUserAccount = !form.value.enableUserAccount
            break
          case 'userName':
            form.value.enableUserName = !form.value.enableUserName
            break
          case 'userPhone':
            form.value.enableUserPhone = !form.value.enableUserPhone
            break
          // case 'userAddress':
          //   form.value.enableUserAddress = !form.value.enableUserAddress
          //   break
          case 'reg':
            form.value.carryRegistInfo = !form.value.carryRegistInfo
            break
          case 'spare':
            form.value.showRelationSpare = !form.value.showRelationSpare
            break
          case 'orderstatusArr':
            form.value.orderstatusArr = form.value.orderStatus.split(',').filter((o) => o) || []
            break
          case 'enableOrderModule':
            form.value.enableOrderModule = !form.value.enableOrderModule
            break
        }
      })
  }

  defineExpose({ getSet })
</script>

<style scoped lang="scss">
  @import '../../index.scss';
</style>
